<template>
  <el-main style="background-color:#fff">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item
        label="访问视频"
        prop="name"
      >
        <el-input
          v-model="form.name"
          style="width: 800px;"
        />
      </el-form-item>
      <el-form-item
        label="访问URL"
        prop="url"
      >
        <el-input
          v-model="form.url"
          style="width: 800px;"
        />
      </el-form-item>
      <el-form-item
        label="访问开始时间"
        prop="startTime"
      >
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="开始时间"
        />
      </el-form-item>
      <el-form-item
        label="访问结束时间"
        prop="endTime"
      >
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item
        label="动态代理"
      >
        <el-input
          v-model="form.proxyServer"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="访问设备"
        prop="device"
      >
        <el-select
          v-model="form.device"
          placeholder="请选择设备"
          @change="handleChangeDevice"
        >
          <el-option
            label="PC"
            value="pc"
          />
          <el-option
            label="平板"
            value="pad"
          />
          <el-option
            label="手机"
            value="mobile"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="访问操作系统"
        prop="osName"
      >
        <el-select
          v-model="form.osName"
          placeholder="请选择操作系统"
          @change="handleChangeOs"
        >
          <template v-for="item in props.osList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="操作系统版本"
        prop="osVersion"
      >
        <el-select
          v-model="form.osVersion"
          placeholder="请选择操作系统版本"
        >
          <template v-for="item in props.osVersionList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="访问浏览器"
        prop="browserName"
      >
        <el-select
          v-model="form.browserName"
          placeholder="请选择浏览器"
          style="height: 100%;"
          @change="handleChangeBrowser"
        >
          <template v-for="item in props.browserList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="浏览器版本"
        prop="browserName"
      >
        <el-select
          v-model="form.browserVersion"
          placeholder="请选择浏览器版本"
          style="height: 100%;"
        >
          <template v-for="item in props.browserVersionList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >
          策略发布
        </el-button>
        <el-button @click="onClear">
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import {
  chromeBrowserVersion, edgeBrowserVersion, firefoxBrowserVersion, ieBrowserVersion, mobileBrowser,
  mobileOs, mobileOsVersion, operaBrowserVersion,
  padBrowser,
  padOs, padOsVersion,
  pcBrowser,
  pcOs, pcOsVersion
} from '@/views/manager/components/constant.js'
import { visit } from '@/apis/netflow.js'

const route = useRoute()

const ruleFormRef = ref(null) // 登录表单ref
const rules = reactive({
  name: [
    { required: true, message: '请输入视频名称', trigger: 'blur' }
  ],
  url: [
    { required: true, message: '请输入视频URL', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '请选择时间范围', trigger: 'blur' }
  ],
  device: [
    { message: '请选择设备类型', trigger: 'change' }
  ],
  osName: [
    { message: '请选择操作系统', trigger: 'change' }
  ],
  browserName: [
    { message: '请选择浏览器类型', trigger: 'change' }
  ]
})

// do not use same name with ref
const form = reactive({
  site: route.query.site,
  name: route.query.name,
  url: route.query.url,
  startTime: new Date(),
  endTime: new Date(),
  proxyServer: '',
  device: '',
  osName: '',
  osVersion: '',
  browserName: '',
  browserVersion: '',
  desc: ''
})

const props = reactive({
  osList: pcOs,
  osVersionList: pcOsVersion,
  browserList: pcBrowser,
  browserVersionList: chromeBrowserVersion
})

const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const onSubmit = () => {
  ruleFormRef.value.validate((validate) => {
    if (validate) { // 判断表单是否验证通过。
      const data = {
        site: form.site,
        videoName: form.name,
        videoUrl: form.url,
        startTime: formatDate(form.startTime),
        endTime: formatDate(form.endTime),
        proxyServer: form.proxyServer,
        device: form.device,
        osName: form.osName,
        osVersion: form.osVersion,
        browserName: form.browserName,
        browserVersion: form.browserVersion
      }
      visit(data).then((result) => {
        if (result === 0) {
          ElMessage.success('下发成功！')
        } else {
          ElMessage.error('下发失败！')
        }
      })
    } else {
      ElMessage.error('请检查数据！')
    }
  })
}

const onClear = () => {
  form.name = ''
  form.url = ''
  form.time = new Date()
  form.proxyServer = ''
  form.device = ''
  form.osName = ''
  form.osVersion = ''
  form.browserName = ''
  form.browserVersion = ''
}

const handleChangeDevice = (value) => {
  switch (value) {
    case 'pc':
      form.osName = pcOs[0].value
      form.osVersion = pcOsVersion[0].value
      form.browserName = pcBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = pcOs
      props.osVersionList = pcOsVersion
      props.browserList = pcBrowser
      props.browserVersionList = chromeBrowserVersion
      break
    case 'pad':
      form.osName = padOs[0].value
      form.osVersion = padOsVersion[0].value
      form.browserName = padBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = padOs
      props.osVersionList = padOsVersion
      props.browserList = padBrowser
      props.browserVersionList = chromeBrowserVersion
      break
    case 'mobile':
      form.osName = mobileOs[0].value
      form.osVersion = mobileOsVersion[0].value
      form.browserName = mobileBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = mobileOs
      props.osVersionList = mobileOsVersion
      props.browserList = mobileBrowser
      props.browserVersionList = chromeBrowserVersion
      break
  }
}

const handleChangeOs = (value) => {
  switch (value) {
    case 'windows':
      props.browserList = padBrowser
      form.browserName = padBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      break
    case 'android':
      props.browserList = mobileBrowser
      form.browserName = mobileBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      break
  }
}

const handleChangeBrowser = (value) => {
  form.browserVersion = ''
  switch (value) {
    case 'chrome':
      props.browserVersionList = chromeBrowserVersion
      form.browserVersion = chromeBrowserVersion[0].value
      break
    case 'ie':
      props.browserVersionList = ieBrowserVersion
      form.browserVersion = ieBrowserVersion[0].value
      break
    case 'edge':
      props.browserVersionList = edgeBrowserVersion
      form.browserVersion = edgeBrowserVersion[0].value
      break
    case 'firefox':
      props.browserVersionList = firefoxBrowserVersion
      form.browserVersion = firefoxBrowserVersion[0].value
      break
    case 'opera':
      props.browserVersionList = operaBrowserVersion
      form.browserVersion = operaBrowserVersion[0].value
      break
  }
}

</script>
